{extend name="homeheader:header"/}
{block name="content"}
	<link rel="stylesheet" type="text/css" href="/home/css/order_dete.css" />
	<body style="overflow-x: hidden;">
		<div class="order_dete">
			<div class="top">
				<a href="javascript:history.back(-1)" class="back">
					<i class="iconfont">&#xe615;</i></a>
				我的订单
			</div>
			<div class="sh row">
				<div class="col-xs-1">
					<i class="iconfont icon-dizhi"></i>
				</div>
				<div class="col-xs-11">
					<p class="row"><span>收货人：</span><span>{$address.a_name}</span><span>{$address.a_tel}</span></p>
					<div class="">
						收货地址：{$address.a_address}
					</div>
					<span>(请确认正确的收货地址)</span>
				</div>
			</div>
			<div class="wrap_bt">
				{foreach name="list['goods']" item="vo"}
					<div class="b_top container row">
						<div class="le col-xs-3">
							<img src="{:getPreviewUrl($vo['g_pic']['photos'][0]['url'])}" />
						</div>
						<div class="col-xs-9">
							<h3>{$vo.g_name}</h3>
							<small>{$vo.g_description}</small>
						</div>
					</div>
					<div class="b_se">
						<p>购买数量</p>
						<ul class="name row">
							<li>规格</li>
							<li>单价</li>
							<li>购买数量</li>
							<li>总价</li>
						</ul>
						<ul class="init row">
							{foreach name="vo['info']" item="v1"}
								<li>{$v1.i_name}</li>
								<li>￥{$v1.i_price}</li>
								<li>{$v1.oi_number}</li>
								<li>￥{$v1.oi_price}</li>
							{/foreach}
						</ul>
					</div>
				{/foreach}
				<div class="mone">
					<p>合计： <span>￥{$list.o_tprice}</span></p>
				</div>
				<div class="info container">
				<input type="hidden" name="" value="{$list.id}" id="orderid"/>
				<p>订单编号： <span>{$list.o_code}</span>
				<p>创建订单： <span>{:date('Y-m-d H:i',$list['addtime'])}</span></p>
			</div>
			</div>
			<div class="fx_b false">
				<div class="col-xs-6" id="cancelorder">
					<a>
						取消订单
					</a>
				</div>
				<div class="col-xs-6 fk">
					<a data-method="offset" data-type="b" class="bt">
						付款
					</a>
				</div>
			</div>
		</div>
	</body>
	<div class="ap_of" style="display: none;">
		<h3>￥<span id="o_tprice">{$list.o_tprice}</span></h3>
		<p>付款方式</p>
		<form class="layui-form" action="" lay-filter="example">
			<ul>
				<li>
					<div class="layui-input-block">
						<input type="radio" name="money" class="money" title="余额" value="1" />
					</div>
				</li>
				<li>
					<div class="layui-input-block">
						<input type="radio" name="money" class="money" title="微信" value="2" />
					</div>
				</li>
				<li>
					<div class="layui-input-block">
						<input type="radio" name="money" class="money" title="支付宝" value="3" />
					</div>
				</li>
		</ul>
		</form>
	</div>
</html>
<script type="text/javascript">
	layui.use('layer', function() { //独立版的layer无需执行这一句
		var $ = layui.jquery,
			layer = layui.layer; //独立版的layer无需执行这一句

		//触发事件
		var active = {
			offset: function(othis) {
				var type = othis.data('type'),
					text = othis.text();
				layer.open({
					type: 1
					,offset: type
					,id: 'clk' + type //防止重复弹出
					,content: $(".ap_of")
					,btn: '立即付款'
					,btnAlign: 'c' //按钮居中
					,shade: .7 //不显示遮罩
					,anim:6
					,area: ['100%', ''],
					closeBtn: 1,
					title: ['确认付款', 'text-align: center;'],
					yes: function() {
						var o_type = '';
						/* 订单总金额 */
					  	var o_tprice = Number($('#o_tprice').text());

						$("input[type='radio'][class='money']:checked").each(function(){
							o_type = $(this).val();
						});
						/* 订单id */
						var oid = $('#orderid').val();
						/* 未付款 */
						if(o_type == ''){
							layer.msg('你还没有选择支付方式', {icon: 5});
							return false;
						}else if(o_type == '1'){
							$.ajax({
								type:"post",
								url:"{:url('/home/user/getUser')}",
								async: true,
								contentType:"application/json",
								success:function(res){	
									/* 用户的总金额 */
									var u_wallet = res.data.u_wallet;
									/* 余额不足 */
									if(u_wallet<o_tprice){
										layer.msg('账户余额不足,请选择其他支付方式', {icon: 5});
										return false;
									}else{
										/* 余额付款 */
										$.post('/home/orders/orderPay',{id:oid,o_type:o_type},function(re){
											if(re.code == 0){
												layer.msg('使用余额付款成功',{icon:6});
												setTimeout(function(){
													window.location.href="/home/orders/osuccess/?id="+oid
												},1000);
											}
										},'json');
									}
									
								}
							});

						}else if(o_type == '2'){
							/* 微信付款 */
							layer.msg('还没有做', {icon: 5});
							
						}else if(o_type == '3'){
							/* 支付宝付款 */
							$.post('/home/Payment/payOrder',{id:oid,o_type:o_type},function(r){
								console.log(r)
								
							},'json');
							
						}

					}
				});
			}
		};

		$('.fx_b .bt').on('click', function() {
			var othis = $(this),
				method = othis.data('method');
			active[method] ? active[method].call(this, othis) : '';
		});

	});
	layui.use(['form', 'layedit', 'laydate'], function() {
		var form = layui.form,
			layer = layui.layer,
			layedit = layui.layedit,
			laydate = layui.laydate;

	});
	
	/* 取消订单 */
	$('#cancelorder').click(function(){
		var oid = $('#orderid').val();
		
		$.post('/home/orders/deleteOrder',{id:oid},function(res){
			if(res.code == 0){
				layer.msg(res.msg, {icon:6});
				setTimeout(function(){
					window.location.href="/home/orders/sorder/?id="+oid;
				},1000);
			}
		},'json');
	});
</script>
{/block}